<template>
  <div style="display: inline-block;vertical-align: middle;height: 1.5em;">
    <div class="mainDiv" @click="clickJSwitch">
        <svg t="1760405175524" class="icon" viewBox="0 0 1024 520" version="1.1" p-id="3703" width="40" height="30" id="svg2" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
            <path d="M 764,0 H 260 C 116.4,0 0,116.4 0,260 0,403.6 116.4,520 260,520 H 764 C 907.6,520 1024,403.6 1024,260 1024,116.4 907.6,0 764,0 Z" p-id="3704" id="path1"
            :fill="getFillColor()"
            />
            <path ref="circle" d="m 266.67276,483.46773 c -123.7,0 -224.000002,-100.3 -224.000002,-224 0,-123.7 100.300002,-224 224.000002,-224 123.7,0 224,100.3 224,224 0,123.7 -100.3,224 -224,224 z" fill="#ffffff" id="path2" 
            :class="[isUndefined?'isIndeterminateClass':(value?'isOpenClass':'isCloseClass')]"
            />
            <g :class="[isUndefined?'questionShow':'questionHide']" transform="translate(250, -250)" :fill="isIndeterminateColor">
                <path d="m 241.16386,573.95722 v -22.12701 q 0,-22.81849 9.45008,-40.10522 9.45008,-17.51722 28.35024,-29.50269 18.66967,-11.52448 27.88926,-25.12338 9.45008,-13.82938 9.45008,-29.73318 0,-17.28673 -11.52449,-26.73681 -11.52448,-9.68057 -32.72954,-9.68057 l 0.46098,-43.79305 q 44.9455,0 69.6079,20.51359 24.89289,20.2831 24.89289,57.39195 0,25.58436 -12.90742,46.55893 -12.67694,20.97456 -38.2613,37.33933 -14.75134,9.68057 -22.12701,21.20506 -7.37568,11.294 -7.37568,24.89289 v 18.90016 z M 193.68298,430.5926 161.87539,397.63257 q 16.13428,-22.81849 45.86746,-36.64787 29.96367,-13.82939 64.76762,-13.82939 l -0.46098,43.79305 q -21.66604,0 -42.6406,10.83302 -20.97457,10.83302 -35.72591,28.81122 z m 70.99084,253.07774 q -14.05988,0 -24.20143,-9.91106 -9.91105,-10.14155 -9.91105,-24.20142 0,-14.29036 9.91105,-24.20142 10.14155,-9.91106 24.20143,-9.91106 14.29036,0 24.20142,9.91106 9.91106,9.91106 9.91106,24.20142 0,14.05987 -9.91106,24.20142 -9.91106,9.91106 -24.20142,9.91106 z" id="text2"/>
            </g>
        </svg>
        <div class="label" :style="disable ? 'color:var(--disable-color)' : ''">{{ label }}</div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            isUndefined: this.indeterminate
        }
    },
    props: {
        value: { type: Boolean, default: false },
        label: {
            type: String,
            default: ''
        },
        disable: {
            type: Boolean,
            default: false
        },
        indeterminate: {
            type: Boolean,
            default: false
        },
        isOpenColor:{
            type: String,
            default: "#13ce66"
        },
        isCloseColor:{
            type: String,
            default: "#ff4949"
        },
        isIndeterminateColor:{
            type: String,
            default: "#409EFF"
        }
    },
    watch: {
        indeterminate(newVal) {
            this.isUndefined = newVal;
        }
    },
    mounted() {
        this.isChecked = this.value;
    },
    methods: {
        clickJSwitch() {
            if (this.disable) {
                return;
            }
            if(this.isUndefined){
                this.isUndefined = false;
                this.$emit("input", true);
                this.$emit('update:value', true);
                this.$emit('checked', true);
                this.$emit('change', true);
                return;
            }
            if (this.value) {
                this.$emit("input", false);
                this.$emit('update:value', false);
                this.$emit('checked', false);
                this.$emit('change', false);
            } else {
                this.$emit("input", true);
                this.$emit('update:value', true);
                this.$emit('checked', true);
                this.$emit('change', true);
            }
        },
        getFillColor(){
            if(this.disable){
                return "var(--disable-color)";
            }else{
                if(this.isUndefined){
                    return this.isIndeterminateColor;
                }else{
                    return this.value?this.isOpenColor:this.isCloseColor;
                }
            }
        }
    }
}
</script>

<style>
:root {
    --primary-color: var(--theme-primary-color, #4c535a);
    --disable-color: var(--theme-disable-color, #b2b3b4)
}
</style>
<style scoped>
* {
    margin: 0;
    padding: 0;
}

.mainDiv {
    display: flex;
    vertical-align: middle;
    cursor: pointer;
    width: 100%;
}

.box {
    height: 1.5em;
    width: 1.5em;
    display: inline;
    text-align: center;
    vertical-align: middle;
    background-color: none !important;
}

.svg {
    height: 1.5em;
    width: 1.5em;
}

.label {
    user-select: none;
    display: inline;
    color: var(--theme-text-color);
    line-height: 100%;
    margin-left: 0.2em;
}
.isOpenClass{
    transition: all 0.3s;
    transform: translateX(0px);
}
.isCloseClass{
    transition: all 0.3s;
    transform: translateX(500px);
}
.isIndeterminateClass{
    transition: all 0.3s;
    transform: translateX(250px);
}
.questionShow{
    transition: all 0.3s;
    opacity: 1;
}
.questionHide{
    transition: all 0.3s;
    opacity: 0;
}
</style>